<template>
  <div class="container">

    <div class="hh1">
      <h1>
        hello
      </h1>
      <div class="block">
        <span class="demonstration">Click 指示器触发</span>
        <el-carousel trigger="click" height="150px">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 class="small">{{ item }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="hh2">
      <h1>你好</h1>
    </div>


  </div>
</template>

<script>
  export default {
    name: "test"
  }
</script>

<style scoped>
  .container {
    height: 600px;
    width: 600px;
    margin: 50px auto 0px;

    /*  边框 不加边框 看不出效果*/
    border: 2px solid #a4da89;
    /*background: url("static/img/1.jpg");*/
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11695386033%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651296289&t=45ddae06e2aa9c3ed253a0836975b608");
    background-size: 600px 600px;
    /*backdrop-filter: brightness(20%);*/
  }

  .hh1 {
    border: #dd6161 solid 3px;
    margin: 190px;
    width: 300px;
    height: 300px;
    float: left;
  }
</style>
